import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { List, Icon, DatePicker } from 'antd-mobile';
import styles from './setEducation.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
import PopupsRow from '../../../../../../common/popupsRow/PopupsRow';
import EducationPickerRow from './educationPickerRow';
import Line from '../../../../../../common/borderLine/Line';
import convertValue from './convertEducation';
import CustBtn from '../../../../../../common/buttons/Btn';

const Item = List.Item

class SetEducation extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      maxEntranceTime:'',
      minEntranceTime:'',
      maxGraduationTime:'',
      minGraduationTime:'',
      entranceTime:'', //入学时间
      graduationTime:'', //毕业时间
      collegeName:'', //院校名称
      education:'', //学历
      major:'', //专业
      description:'', //在校情况
    }
  }

  componentDidMount(){

    const { entranceTime='',graduationTime='',
    collegeName='',education='',major='', description=''} = this.props;

    const now = new Date();
    this.setState({
      minEntranceTime: moment('1990-01-01', 'YYYY-MM-DD').utcOffset(8),
      maxEntranceTime: moment(now, 'YYYY-MM-DD').utcOffset(8),
      minGraduationTime: entranceTime ? moment(entranceTime, 'YYYY-MM-DD').utcOffset(8) : moment('1990-01-01', 'YYYY-MM-DD').utcOffset(8),
      maxGraduationTime: moment(now, 'YYYY-MM-DD').utcOffset(8),
      entranceTime: entranceTime ? moment(entranceTime, 'YYYY-MM-DD').utcOffset(8): '',
      graduationTime: graduationTime ? moment(graduationTime, 'YYYY-MM-DD').utcOffset(8) : '',
      collegeName,
      education,
      major,
      description,
    })

  }

  componentWillReceiveProps(newProps){

    const { entranceTime='',graduationTime='',
    collegeName='',education='',major='', description=''} = newProps;

    const stateEntranceTime = this.state.entranceTime._i;

    let reTime = graduationTime;
    // console.log('reTime',reTime);
    if(reTime){
      if(stateEntranceTime != entranceTime){
        reTime = '';
        this.props.saveGraduationTime(reTime);
      }
    }

    this.setState({
      entranceTime: entranceTime ? moment(entranceTime, 'YYYY-MM-DD').utcOffset(8): '',
      graduationTime: graduationTime ? moment(graduationTime, 'YYYY-MM-DD').utcOffset(8) : '',
      collegeName,
      education,
      major,
      description,
    })
  }

  //入学时间
  onEntranceTime(value){
    let nDate = new Date(value);
    let year = nDate.getFullYear();
    let month = nDate.getMonth()+1;
    let day = nDate.getDate();
    if(month < 10){
      month = '0'+month;
    }
    if(day<10) {
      day = '0'+day;
    }
    let nTime = year + "-" + month + "-" + day;

    this.setState({
      minGraduationTime:value,
    })
    this.props.saveEntranceTime(nTime);
  }

  //毕业时间
  onGraduationTime(value){
    let nDate = new Date(value);
    let year = nDate.getFullYear();
    let month = nDate.getMonth()+1;
    let day = nDate.getDate();
    if(month < 10){
      month = '0'+month;
    }
    if(day<10) {
      day = '0'+day;
    }
    let nTime = year + "-" + month + "-" + day;
    this.props.saveGraduationTime(nTime);
  }

  onSignature(e){
    const value = e.target.value;
    // console.log(value);
    this.props.saveDescription(value)
  }


  render(){
    const { pageStatus,onDelete,saveCollegeName,saveEducation,saveMajor } = this.props;
    const { maxEntranceTime,minEntranceTime,maxGraduationTime,minGraduationTime,
      entranceTime, graduationTime, collegeName, education, major, description} = this.state;

    const {getFieldDecorator, validateFields, getFieldsValue, resetFields, getFieldProps} = this.props.form;
    console.log('education',education);
    //院校名称
    const collegeProps = {
      popupsHead:'请填写院校名称',
      labelName:'院校名称',
      PopupsDefaults: collegeName ? collegeName : '',
      displayDefaults:  collegeName ? collegeName : "请填写" ,
      onSave(value){
        if (value) {
          saveCollegeName(value);
        }
      }
    }

    //学历
    const educationProps = {
      data: [
        [
          {
            label: '初中',
            value: '1'
          },{
            label: '中专/技校',
            value: '2'
          },{
            label: '高中',
            value: '3'
          },{
            label: '大专',
            value: '4'
          },{
            label: '本科',
            value: '5'
          },{
            label: '研究生',
            value: '6'
          },{
            label: '博士',
            value: '7'
          }
        ]
      ],
      title:"学历",
      displayDefaults: education,
      displayNull:'请选择',
      header:'学历',
      onSave(value){
        if(value){
          // console.log(value);
          const newValue = convertValue.numToString(value[0])
          console.log(newValue);
          saveEducation(newValue);
        }
      }
    }

    //专业
    const majorProps = {
      popupsHead:'请填写专业',
      labelName:'专业',
      PopupsDefaults: major ? major : '',
      displayDefaults:  major ? major : "请填写",
      onSave(value){
        if (value) {
          saveMajor(value);
        }
      }
    }

    const btnProps = {
      textValue:'删除',
      onOk(){
        onDelete()
      },
    }

    return(
      <div>
        <DatePicker
          mode="date"
          title="入学时间"
          extra="请选择"
          value={entranceTime}
          onOk={v => this.onEntranceTime(v)}
          minDate={minEntranceTime}
          maxDate={maxEntranceTime}
          >
          <List.Item arrow="horizontal">入学时间</List.Item>
        </DatePicker>
        <Line />
        <DatePicker
          mode="date"
          title="毕业时间"
          extra="请选择"
          value={graduationTime}
          onOk={v => this.onGraduationTime(v)}
          minDate={minGraduationTime}
          maxDate={maxGraduationTime}
          >
          <List.Item arrow="horizontal">毕业时间</List.Item>
        </DatePicker>
        <Line />
        <PopupsRow {...collegeProps} />
        <Line />
        <PopupsRow {...majorProps} />
        <Line />
        <EducationPickerRow {...educationProps}/>
        <Line />
        <div className={styles.signature} >
          <div className={styles.signatureLink}>
            在校情况
          </div>
          <textarea
            placeholder="请填写"
            cols="25"
            rows="5"
            className={styles.TextareaItem}
            {...getFieldProps('description',{
              initialValue:description,
              rules: [
                { required: false, message: '' }
              ]
            })}
            onBlur={(e) => this.onSignature(e)}
          />
        </div>
        {pageStatus == 'edit' ? (
          <div className={styles.btn}>
            <CustBtn {...btnProps}/>
          </div>
        ):''}
      </div>
    )
  }
}

const SetEducationWrapper = createForm()(SetEducation);
export default connect()(SetEducationWrapper);
